<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="../templates/layout.xhtml">
	<ui:define name="content">
		<h:form prependId="false" id="transactionGraphDataForm">
			<p:panel id="data" toggleable="true" toggleSpeed="250">
				<f:facet name="header">
					<h:outputText value="#{messages.label_graph_header}" />
				</f:facet>
				<h:panelGrid columns="1" width="100%">
					<p:spacer width="10" height="15" />
					<h:panelGrid columns="2">

						<h:outputText value="#{messages.label_graph_accounts}" />
						<h:outputText value="#{messages.label_graph_period}" />

						<h:selectOneMenu value="#{bankTransactionBean.selectedAccount}">
							<f:selectItems value="#{bankTransactionBean.accountItems}" />
							<p:ajax event="change"
								update="stacked,:accountDataForm:accountData">
								<f:setPropertyActionListener target="#{accountBean.accounts}"
									value="#{bankTransactionBean.selectedAccounts}">
								</f:setPropertyActionListener>
							</p:ajax>
						</h:selectOneMenu>

						<h:selectOneMenu value="#{bankTransactionBean.selectedTimeperiod}">
							<f:selectItem itemValue="0" itemLabel="#{messages.label_tp_all}" />
							<f:selectItem itemValue="1"
								itemLabel="#{messages.label_tp_two_years}" />
							<f:selectItem itemValue="2"
								itemLabel="#{messages.label_tp_one_year}" />
							<f:selectItem itemValue="3"
								itemLabel="#{messages.label_tp_six_months}" />
							<f:selectItem itemValue="4"
								itemLabel="#{messages.label_tp_three_months}" />
							<p:ajax event="change" update="stacked" />
						</h:selectOneMenu>

					</h:panelGrid>
					<p:spacer width="10" height="15" />
					<p:lineChart id="stacked"
						value="#{bankTransactionBean.transactionModel}"
						legendPosition="nw" stacked="true" fill="true"
						title="#{messages.label_graph_header}"
						style="height:500px;margin-top:20px"
						xaxisLabel="#{messages.label_x_time}"
						yaxisLabel="#{accountBean.currency}" />
				</h:panelGrid>
			</p:panel>
		</h:form>
		<ui:include src="accountList.xhtml">
			<ui:param name="dataList"
				value="#{bankTransactionBean.selectedAccounts}" />
		</ui:include>
	</ui:define>
</ui:composition>
</html>